﻿
@{
    ViewData["Title"] = "EditPhoto";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>编辑照片</h1>
<div style="display:flex;width:1000px">
    <div class="layui-form-item">
    <button class="layui-btn" id="add">创建分类</button>   
   </div>
  </div>
<table class="layui-table" id="demoTables" lay-filter="demoTables">
    <tbody>
        <!-- 这里是动态生成的数据 -->
    </tbody>
</table>
<div id="demo-laypage-all"></div>
@* 商品操作列 *@
<script type="text/html" id="bardemo">
   
</script>

<div id="demo-laypage-layout-1"></div>

<div id="roomTypeAdd" style="display:none">
    <form class="layui-form">
        <h2>基本类型</h2>
        <div class="layui-form-item" style="display:none">
            <label class="layui-form-label"><span style="color:red">*</span>分类id</label>
            <div class="layui-input-block">
                <input type="text" name="storeTypeId" id="storeTypeId" placeholder="分类id">
            </div>
        </div>

   <div class="layui-form-item">
    <label class="layui-form-label">分类状态</label>
    <div class="layui-input-block">
        <input type="checkbox" name="storeTypeState" lay-skin="switch" lay-text="启用|禁用">
    </div>
</div>

      <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
             <input type="text" name="storeTypeName" id="storeTypeName" lay-verify="required|maxlength" lay-maxlength="9"   lay-reqtext="名称长度不超过9个字符" autocomplete="off" class="layui-input">
          </div>
      </div>


          <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                <button id="adds"  class="layui-btn" lay-submit lay-filter="submitForm">确认</button>
                <button id="edit" class="layui-btn" lay-submit lay-filter="xiuForm">修改</button>
            </div>
        </div>

    </form>
</div>


<script>
  layui.use(['table', 'jquery', 'layer', 'form', 'laypage', 'element', 'util', 'laydate','upload'], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var form = layui.form;
    var layer = layui.layer;
    var laypage = layui.laypage;
    var element = layui.element;
    var util = layui.util;
    var laydate = layui.laydate;
    var upload=layui.upload;
    //接收id值
     $(function(){
        var storesId=location.search.split('=')[1];
         show();

    })

        //定义变量
    var from = {
        index: 1,
        pagesize: 15
    }

    var total = 0;
    //显示
    function show() {
        $.ajax({
            url: 'http://localhost:5174/api/StoreType/GetStoreTypeShow',
            type: 'post',
            contentType: "application/json",
            data: JSON.stringify(from),
            headers: {
                "Authorization": "Bearer " + localStorage.getItem('token')
            },
            async: true,
            success: res => {
                total = res.data.total;
                table.render({
                    elem: '#demoTables',
                    data: res.data.data,
                    toolbar: '#toolbarDemo',
                    cols: [[
                        { field: 'storeTypeId', title: '门店id' ,hide: true},
                        { field: 'ck', type: 'checkbox', },
                        { field: 'storeTypeName', title: '分类名称' },
                        { field: 'storeTypeorder', title: '照片数量' },
                        { field: 'storeTypeState', title: '分类状态', templet: function(d){
                          if(d.storeTypeState == 1){
                          return '启用';
                         } else if(d.storeTypeState == 2){
                         return '禁用';
                        }
                       }},
                        { field: 'storeTypeState',
                        title: '操作',
                        templet: function (d) {
                        if (d.storeTypeState === 1) {
                         return `<button class="layui-btn layui-btn-danger" lay-event="toggleState">禁用</button>
                          <button  style="background-color: blue;color: white; width: 80px; height: 40px;" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="editAlbum" >上传照片</button>
                          <button  style="background-color: yellow;color: black; width: 80px; height: 40px;" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="xiuForm" >编辑</button>`;
                        }
                        if (d.storeTypeState === 2) {
                          return `<button style="background-color: green;color: white; width: 80px; height: 40px;"  class="layui-btn layui-btn-primary" lay-event="toggleState">启用</button>
                          <button  style="background-color: blue;color: white; width: 80px; height: 40px;" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="editAlbum" >上传照片</button>
                          <button  style="background-color: yellow;color: black; width: 80px; height: 40px;" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="xiuForm" >编辑</button>`;
                         }
                        }}
                    ]],
                    page:true,
                    limits:[5,10,15],
                    limit:5
                });
            },
            error: function (error) {
                console.error(error);
            }
        })
    }

    // 监听操作列中按钮的点击事件
        table.on('tool(demoTables)', function (obj) {
            console.log(obj.data);
            var data = obj.data;
            if (obj.event === 'toggleState') {
                // 发送 Ajax 请求来更新状态
                $.ajax({
                    url: 'http://localhost:5174/api/StoreType/GetStoreTypeUpdState',  // 假设这是更新状态的 URL
                    type: 'post',
                    contentType: "application/json",
                    data: JSON.stringify({ storeTypeId: data.storeTypeId, storeTypeState: data.storeTypeState === 1? 2 : 1 }),  // 根据当前状态发送新状态
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    async: true,
                    success: function (response) {
                        // 切换本地状态
                        data.storeTypeState = data.storeTypeState === 1? 2 : 1;
                        layer.msg(data.storeTypeState === 1? '启用' : '禁用');
                        // 重新渲染表格
                        table.reload('demoTables', {
                            data: [data]
                        });
                        show();
                    },
                    error: function (error) {
                        console.error(error);
                    }
                });
            }
             if (obj.event === 'editAlbum') {
                      window.location.href='UpPhoto?storeTypeId='+data.storeTypeId;
            }

            if (obj.event === 'xiuForm') {
        $("#edit").show();
        $("#adds").hide();
        // 编辑按钮的处理逻辑
        var data = obj.data; // 获取当前行数据
        layer.open({
            title: '编辑 - id:' + data.storeTypeId,
            type: 1,
            shade: false, // 不显示遮罩
            area: ['80%', '80%'],
            content: $('#roomTypeAdd'),
            end: function () {
                // layer.msg('关闭后的回调', {icon:6});
            }
        });
        // 在这里进行编辑相关的操作，例如打开编辑模态框、发送编辑请求等
        console.log('编辑按钮被点击，行数据为：', data);
    }


        });



    //添加商品
    form.on('submit(submitForm)', function (data) {
       console.log(data.field);      
     
       if(data.field.storeTypeState=="true"){
           data.field.storeTypeState=1;
       }
       else 
       {
           data.field.storeTypeState=2;
       }
        data.elem.disabled = true;//防止重复提交
        $.ajax({
            url: 'http://localhost:5174/api/StoreType/GetStoreTypeAdd',
            type: 'post',
            contentType: "application/json",
            data: JSON.stringify(data.field),
            success: function (res) {
                // 添加成功后的操作
                if (res.code > 0) {
                    layer.msg("添加成功");
                    show()
                }
            }
        });
        return false;
    });


    //  //弹出层
    $(".layui-btn").click(function () {
        var id = $(this).attr('id');
        if (id === "add") {
            $("#edit").hide();
            $("#adds").show();
            
            var index = layer.open({
                type: 1,
                area: ['630px', '360px'],
                shade: false, // 不显示遮罩
                content: $('#roomTypeAdd'), // 捕获的元素
                end: function () {
                    // layer.msg('关闭后的回调', {icon:6});
                }
            });
        }
    });


     //反填商户编辑 （单删）添加商户
    table.on('tool()', function (obj) {
        console.log(obj)
        var data = obj.data; // 获取当前行数demoTable据
        var layEvent = obj.event; // 获取 lay-event 对应的值
        console.log(data)
        $.ajax({
            url: 'http://localhost:5174/api/StoreType/GetStoreTypeFind',  // 替换成实际的接口地址
            type: 'GET',
            data: { id: data.storeTypeId },  // 传递的参数
            success: function (data) {

                // 将数据填充到表单中
                document.getElementById('storeTypeId').value = data.data.storeTypeId;
                $("#storeTypeName").val(data.data.storeTypeName)
                 // 设置单选框的选中状态
                 if(data.data.storeTypeState==1){
                     $('input[name="storeTypeState"]').prop('checked', true);
                 }
                 else{
                     $('input[name="storeTypeState"]').prop('checked', false);
                 }
               },
            error: function (xhr, status, error) {
                console.error('Error fetching user data:', error);
                // 处理错误情况
             }

        });
        //修改商户
        form.on('submit(xiuForm)', function (data) {
            console.log(JSON.stringify(data.field));
           if(data.field.storeTypeState=="on"){
              data.field.storeTypeState=1;
           }
           else 
           {
              data.field.storeTypeState=2;
           }
        data.elem.disabled = true;//防止重复提交
            
            $.ajax({
                url: 'http://localhost:5174/api/StoreType/GetStoreTypeUpd',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(data.field),

                success: function (res) {

                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("修改成功");
                        var index = layer.getFrameIndex('index'); // 获取弹出层的索引
                        layer.close(index);
                    }
                }
            });
            return false;
        });

        if (obj.event === 'yourFunction') {
            $("#edit").show();
            $("#adds").hide();
            //编辑按钮的处理逻辑
            //var roomid = obj.roomId
            layer.open({
                title: '编辑 - id:' + data.storeTypeId,
                type: 1,
                shade: false, // 不显示遮罩
                area: ['80%', '80%'],
                content: $('#roomTypeAdd'),
                end: function () {
                    // layer.msg('关闭后的回调', {icon:6});
                }
            });
            //在这里进行编辑相关的操作，例如打开编辑模态框、发送编辑请求等
            console.log('编辑按钮被点击，行数据为:', data);
        }
        else if (layEvent === 'deleteNumber') {

            layer.confirm('确定要删除该行数据吗？', function (index) {
                // 执行删除操作...
                var myArray = [];
                myArray.push(obj.data.storeTypeId)
                console.log(myArray)
                $.ajax({
                    url: 'http://localhost:5174/api/AppGood/GetDelAppGood',
                    type: 'post',
                    contentType: "application/json",
                    data: JSON.stringify({ storeTypeId: myArray }),
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    success: function (res) {
                        if (res.code > 0) {
                            layer.msg("删除成功");
                            show()
                        }

                        // 删除成功后的操作
                    }
                });
                layer.close(index);
            });
        }
    });




});
   
</script>
